<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>其他项统计</title>
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		<link rel="stylesheet" type="text/css" href="../css/fontawesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css.page/statistics/statisticsOther.css" />
		<link rel="stylesheet" type="text/css" href="../css/process.css" />
		<link rel="stylesheet" type="text/css" href="../css/loading.css" />
		<style type="text/css">
			.statistics-other-jiya,
			.statistics-other-zoufang,
			.statistics-other-qita {
				display: -webkit-box;
				margin-top: 10px;
				-webkit-box-orient: vertical;
				margin-left: 10px;
			}
			
			.statistics-other-jiya>div,
			.statistics-other-zoufang>div,
			.statistics-other-qita>div {
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				color: #666666;
				line-height: 25px;
				height: 25px;
				-webkit-box-align: center;
			}
			
			.icon {
				width: 20px;
				height: 20px;
				margin-left: 10px;
				line-height: 20px;
				text-align: center;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="statistics-other-title hidden">
			<div class="fa fa-angle-left" @click="back"></div>
			<div class="tab">
				<div class="needsclick" @click="jiYa">工程档案积压</div>
				<div class="needsclick" @click="guanXian">管线单位走访</div>
				<div class="needsclick" @click="qiTa">其他档案统计</div>
			</div>
		</div>
		<div class="statistics-other-body" style="margin-top: 10px;">
			<div class="loader">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="statistics-other-list hidden">
				<div class="statistics-other-item" id="jiYa" v-if="!noData">
					<div class="statistics-other-title">工程档案积压完成进度</div>
					<div>
						<div class="progress-part">
							<span class="progress-part-first"></span>
							<span class="progress-part-second"></span>
						</div>
					</div>
					<div class="statistics-other-jiya">
						<div>
							<div class="icon"></div>
							<div>档案类型：{{jiYaData.DocKind}}</div>
						</div>
						<div>
							<div class="fa fa-circle icon" style="color: #eee;"></div>
							<div>积压总数：{{jiYaData.TargetTotal}}卷</div>
						</div>
						<div>
							<div class="fa fa-circle icon" style="color: #1ab394;"></div>
							<div>已完成量：{{jiYaData.BeginAmount}}卷</div>
						</div>
						<div v-if="isSearch">
							<div class="fa fa-circle icon" style="color: #f8ac59;"></div>
							<div>本周期完成量：{{jiYaData.Amount}}卷</div>
						</div>
						<div v-if="!isSearch">
							<div class="fa fa-circle icon" style="color: #f8ac59;"></div>
							<div>本周完成量：{{jiYaData.Amount}}卷</div>
						</div>
					</div>
				</div>
				<div class="statistics-other-item" id="guanXian" v-if="!noData">
					<div class="statistics-other-title">管线单位走访完成进度</div>
					<div>
						<div class="progress-part">
							<span class="progress-part-first"></span>
							<span class="progress-part-second"></span>
						</div>
					</div>
					<div class="statistics-other-zoufang">
						<div>
							<div class="fa fa-circle icon" style="color: #eee;"></div>
							<div>预计走访单位总量：{{zouFangData.TargetTotal}}个</div>
						</div>
						<div>
							<div class="fa fa-circle icon" style="color: #1ab394;"></div>
							<div>已走访单位数量：{{zouFangData.BeginAmount}}个</div>
						</div>
						<div v-if="isSearch">
							<div class="fa fa-circle icon" style="color: #f8ac59;"></div>
							<div>本周期走访数量：{{zouFangData.Amount}}个</div>
						</div>
						<div v-if="!isSearch">
							<div class="fa fa-circle icon" style="color: #f8ac59;"></div>
							<div>本周走访数量：{{zouFangData.Amount}}个</div>
						</div>
					</div>
				</div>
				<div class="statistics-other-item" id="qiTa" v-if="!noData">
					<div v-for="item in otherFileList">
						<div class="row">
							<div class="fa fa-file-text" style="color: #39ad2a;"></div>
							<div style="margin-left: 5px;">档案类别：{{item.type}}</div>
						</div>
						<div class="row2">
							<div style="margin-left: 5px;">接收：{{item.jieshou}}卷</div>
						</div>
						<div class="row2">
							<div style="margin-left: 5px;">入库：{{item.ruku}}卷</div>
						</div>
					</div>
				</div>
				<div class="noData" v-if="noData">暂无此类数据</div>
			</div>
		</div>
	</body>

	<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<!--引入图表插件-->
	<script src="../js/hightcharts/highcharts.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/hightcharts/data.js" type="text/javascript" charset="utf-8"></script>
	<!--引入快速点击插件-->
	<script src="../js/fastclick.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js.page/statistics/statisticsOther.js" type="text/javascript" charset="utf-8"></script>

</html>